<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="utf-8">
	<title>点都德汇点楼</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0">
	<link rel="stylesheet" type="text/css" href="./css/shop_food_mui.css">
	<link rel="stylesheet" type="text/css" href="./libs/swiper/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="./css/style.css">
	
</head>
<body class="intro">
	<div id="loading-wrapper"><img id="loading" src="./images/loading.svg" alt=""></div>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-icon  mui-action-back mui-icon-left-nav"></a>
		<h1 class="mui-title">汇点楼简介</h1>
	</header>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item" href="index.html">
			<i class="mui-icon iconfont icon-trophy"></i>
			<span class="mui-tab-label">商家首页</span>
		</a>
		<a class="mui-tab-item mui-active" href="javascript:;">
			<i class="mui-icon iconfont icon-card"></i>
			<span class="mui-tab-label">商家简介</span>
		</a>
	</nav>
	<div id="scrollContainer" class="mui-content">
		<div class="banner" style="background-image:url(./images/VCG41119014802.jpg)"></div>
		<nav id="nav" class="animated">
			<div class="nav-wrapper">
				<ul>
					<li class="active"><a href="#introduce">商家简介</a></li>
					<li><a href="#activity">优惠活动</a></li>
				</ul>
			</div>
			
		</nav>
		
		<div id="introduce">
			<div class="header-wrapper" >
				<h1>商家简介</h1>
			</div>
			
			<section>
				<h2 class="title">品牌故事</h2>
				<div class="content">
					<p>点都德是一家粤菜馆，位于广州市，适宜情侣约会、家庭聚会、朋友聚餐、休闲小憩、随便吃吃。</p>
					<p>24小时营业，是老字号，可以刷卡，订座服务，提供在线菜单，有下午茶，提供早餐，有夜宵，有wifi。</p>
				</div>

			</section>
			<section>
				<h2 class="title">营业时间</h2>
				<div class="content">
					<ul class="square">
						<li>早茶10:00—14:30</li>
						<li>午市11:00—14:30</li>
						<li>晚茶17：00-21：30</li>
					</ul>
				</div>

			</section>
			<section>
				<h2 class="title">联系信息</h2>
				<div class="content">
					<ul>
						<li>地址： 珠江新城花城大道中86号优托邦1座6层</li>
						<li>电话： 020-29137000 020-29136999</li>
						
					</ul>
				</div>

			</section>
		</div>
		<div id="activity">
			<div class="header-wrapper" >
				<h1>优惠活动</h1>
			</div>
			<section>
				<h2 class="title">特色推荐</h2>
				<div class="content">
					<img src="./images/img01.png">
				</div>

			</section>
			<section>
				<h2 class="title">温馨提示</h2>
				<div class="content">
					<img src="./images/img02.png">
				</div>

			</section>
		</div>


	</div>
	<script type="text/javascript" src="./libs/jquery.js"></script>
	<script type="text/javascript" src="./libs/uajsapi.js"></script>
	
	<script type="text/javascript">
		$(function(){
			//检测运行环境----------------------------------------
			{
				let UA = new UaInfo();
				if(UA.appinfo.appname === "wechat"){
					$('header').addClass('hidden');
				}
			};


			//scroll环境=======================================================
			{
			
				let $container =  $('#scrollContainer');
				let $navBox =$("#nav");
				let headerHeight = $('header').height();
				let navHeight = $navBox.offset().top - headerHeight;
				let timeoutRuning = false;
				let oldScrollTop = 0;
				let difference = 0;
				const SCROLL_UP = 'scroll_up';
				const SCROLL_DOWN = 'scroll_down';
				const SCROLL_STOP = 'scroll_stop';

				if($('header').hasClass('hidden')){
					navHeight += headerHeight;
				}

				
			
				$container.on(SCROLL_UP,function(){
					//console.log(SCROLL_UP);
					if($navBox.hasClass('navFix')){
						$navBox.fadeOut("slow");
					}
				});
				$container.on(SCROLL_DOWN,function(){
					//console.log(SCROLL_DOWN);
					if($navBox.hasClass('navFix')){
						$navBox.fadeIn("slow");
					}
					
				});
				$container.on(SCROLL_STOP,function(){
					//console.log(SCROLL_STOP);
					//$navBox.fadeIn("slow");
				});

				//内容信息导航吸顶
				$container.scroll(function(event){ 
					let scrollTop = $container.scrollTop();

					//console.error(scrollTop,navHeight);
				 	if(scrollTop > navHeight){ 
	                    $navBox.addClass("navFix");
	                    $('#introduce').addClass('fixPadding');
	                } else{ 
	                    $navBox.removeClass("navFix"); 
	                    $('#introduce').removeClass('fixPadding');
	                } 
	                if(!timeoutRuning){
	                	timeoutRuning = true;
	                	setTimeout(scrollHandler, 200);
	                	difference = scrollTop - oldScrollTop;
	                	if(difference > 5 ){
	                		$container.trigger(SCROLL_UP);
	                	}else if(difference < -5){
	                		$container.trigger(SCROLL_DOWN);
	                	}else{
	                		$container.trigger(SCROLL_STOP);
	                	}

	                }

	                
	            });

	            function scrollHandler(){
	            	timeoutRuning = false;
					oldScrollTop = $container.scrollTop();
	            	if($('#activity').offset().top<0){
	            		$('#nav li').first().removeClass('active');
	            		$('#nav li').last().addClass('active');
	            	}else{
	            		$('#nav li').first().addClass('active');
	            		$('#nav li').last().removeClass('active');
	            	};
	            } 
			}

			//scroll end ===================================================
    
    		$('#nav').on('click','li',function(event){
    			let $this = $(this);
    			$this.siblings('').removeClass('active');
    			if(!$this.hasClass('active')){
    				$this.addClass('active');
    			}
    		})


		});

		//页面下载完成后，隐藏loading
		$(window).on('load',function(){
			$('#loading-wrapper').hide();
		});
	</script>
	 
	
</body>
</html>